﻿
@{
    ViewBag.Title = "Test";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section style{
    <style>
        #area {
            width: 100%;
            height: auto;
            min-height: 55px;
            border: #E0E0E0 1px solid;
            display: inline-block;
            position: relative;
        }

        #select {
            width: 50px;
            height: auto;
            min-height: 53px;
            border-left: #E0E0E0 1px solid;
            line-height: 51px;
            text-align: center;
            position: absolute;
            right:0px;
        }

        #area:hover > #select{
            background-color:#F0F0F0;
            cursor: pointer
        }

        ul {
            padding-left: 0px;
            width: 100%;
            border: 1px solid #E0E0E0;
            border-top: none;
        }

        ul > li{
            height:50px;
            line-height:50px;
            list-style-type:none;
            padding-left:10px;
        }

        ul > li:hover{
            background-color:#F0F0F0;
            cursor: pointer;
        }

        .item {
            display: inline-block;
            margin: 10px;
            padding: 5px 30px 5px 10px;
        }
    </style>    
}

@section script{
    <script>
        $("#add").on("click", function () {
            $("#area").append('<div title="18363995052" class="alert alert-info alert-dismissible item"  role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>你好啊</div>')
        });
        $("#query").on("click", function () {

            var phones = [];
            $.each($("#area > div"), function (index, item) {
                phones.push(item.title)
            })
            alert(phones.join(','));
        });
        $("#select").click(function () {
            $("ul").toggle();
        });
    </script>    
}

<button id="add" class="btn btn-info" style="margin:30px">添加</button>
<button id="query" class="btn btn-success" style="margin:30px">确定</button>
<div id="area">
    <div id="select">
        <i class="fa fa-chevron-down"></i>
    </div>
</div>
<ul>
    <li>123123123123</li>
    <li>123123123123</li>
    <li>123123123123</li>
</ul>
